為什麼先學超連結與圖片？

• 超連結 (<a>) 讓使用者可以在頁面間移動、跳到同頁章節，或啟動動作（寄信、打電話、下載）。
• 圖片 (<img>) 讓內容更完整，但要寫好 alt、路徑與尺寸，閱讀體驗才不會壞掉。

超連結（<a>）基礎

語法：

<a href="https://example.com">到 Example</a>

常見用途：

• 站外連結（絕對路徑）

  <a href="https://developer.mozilla.org/">MDN</a>
  

• 站內連結（相對路徑）

  <a href="./about.html">關於我</a>
  <a href="../index.html">回首頁</a>
  

• 同頁錨點（跳到指定區塊）

  <a href="#contact">聯絡</a>
  ...
  <h2 id="contact">聯絡我</h2>
  

• 新分頁開啟＋安全屬性

  <a href="https://example.com" target="_blank" rel="noopener noreferrer">外部資源</a>
  

• 特殊連結（動作）

  <a href="mailto:me@example.com">寄信給我</a>
  <a href="tel:+886912345678">打電話</a>
  <a href="/files/resume.pdf" download>下載履歷</a>
  

連結文字寫法（可讀＋可近性）：

• 用有意義的文字：閱讀圖片教學 勝過 點我。
• 若連結只有圖像，圖片的 alt 就是連結文字。

圖片（<img>）基礎

語法：

<img src="./images/cat.jpg" alt="橘色貓咪趴在窗邊曬太陽">

重要屬性：

• src：路徑（建議放在 images/ 資料夾）
• alt：替代文字（螢幕報讀器/圖片壞掉時顯示）
• width / height：預留空間避免版面跳動（可填原始像素）
• loading="lazy"：延遲載入、不在視窗內先不載
• decoding="async"：非同步解碼，加快顯示

<img
  src="./images/cover.jpg"
  alt="HTML 教學封面：藍色幾何背景與白色標題"
  width="1200" height="630"
  loading="lazy" decoding="async"
/>

alt 撰寫原則（簡單好記）：

• 圖片是資訊 → 描述重點（誰？做什麼？）
• 圖片是裝飾 → 可寫 alt=""（空字串）
• 圖片在連結裡 → alt 就是連結文字的角色

路徑觀念（很常踩雷）

• 絕對路徑：https://...（站外）
• 相對路徑：相對目前檔案的位置
  • ./：同層
  • ../：上一層
• 大小寫敏感：伺服器多半分大小寫，Cat.png ≠ cat.png
• 避免中文＋空白檔名：容易出現編碼/部署問題

資料夾建議：

project/
├─ index.html
├─ about.html
└─ images/
   ├─ cover.jpg
   └─ logo.png

figure 與 figcaption（更語意化）

<figure>
  <img src="./images/logo.png" alt="站台 Logo：白底藍字 MY SITE">
  <figcaption>網站標誌（Logo），用於導覽列左上角</figcaption>
</figure>

常見錯誤：連結與圖片

• href/src 寫錯層級或少了 ./、../
• 圖片沒有 alt 或把檔名塞進 alt
• 忘了加 rel="noopener noreferrer" 就用 target="_blank"
• Windows 測試正常，上傳後壞掉：大小寫不符、中文/空白檔名
• 沒有設定 width/height，捲動時版面一直跳

VS Code 小技巧

• Emmet：
  • a[href="https://example.com"]{官方文件} → 產生 <a href="https://example.com">官方文件</a>
  • img[src="./images/pic.jpg" alt="示意圖"] → 產生 <img ...> 標籤
• Live Server 外掛：即時預覽修改結果
• 圖片檔名一律小寫、無空白、用連字號 - 分隔

DAY3心得

• 連結不是只有 點我，文字要能單獨表意
• alt 的寫法會影響可近性體驗，裝飾圖就用 alt=""
• 先把路徑與檔名規則定好，之後專案才不會亂